<template>
  <div>{{ num }}</div>

  <button @click="add">点+1</button>
  <hr />
  <h3>{{ x }}</h3>
  <h3>{{ y }}</h3>
  <button @click="setXY">点修改xy</button>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  setup () {
    // let num = 0
    let state = reactive({
      num: { a: 0 }
    })
    const num = toRef(state, 'num')
    function add () {
      //   state.num++
      num.value.a++
      console.log(num)
    }
    // toRefs响应式数据
    const state1 = reactive({
      x: 1,
      y: 2
    })
    function setXY () {
      state1.x++
      state1.y++
      console.log(toRefs(state1))
    }

    return { num, add, ...toRefs(state1), setXY }
  }
}
</script>
<style></style>
